<template>
	<div class="page-container">
		<el-form :model="queryParams" size="default" inline label-width="100px" class="mt35 mb35">
			<el-form-item label="角色名称">
				<el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary">搜索</el-button>
				<el-button >重置</el-button>
			</el-form-item>
			<el-row>
				<el-col :span="24">
					<el-button type="primary" @click="handleOpen">新增</el-button>
				</el-col>
			</el-row>
		</el-form>
		<div>
			<el-table :data="roleData">
				<el-table-column label="ID" prop="id"></el-table-column>
				<el-table-column label="角色名称" prop="name"></el-table-column>
				<el-table-column fixed="right" label="操作" width="120">
					<template #default="scope">
						<el-button link type="primary" size="small" @click="handleOpen(scope.row)">修改</el-button>
						<el-button link type="primary" size="small" @click="delRole(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			
		</div>
		<el-pagination size="small"  :total="total" @current-change="handleCurrentChange"/>
		 <el-dialog
			v-model="dialogVisible"
			title="编辑角色"
			width="30%"
			:before-close="handleClose"
		>
			<el-form :model="roleForm">
			  <el-form-item label="角色名称">
				<el-input v-model="roleForm.name" placeholder="填写角色名称"></el-input>
			  </el-form-item>
			  <el-form-item label="功能菜单">

				<el-tree ref="treeNode"
					v-model="roleForm.menu"
					:props="props"
					:data="menuData"
  					show-checkbox
					node-key="id"
					@check-change="handleCheckChange"
					>
					</el-tree>
				<!-- <el-select v-model="roleForm.menu" multiple placeholder="">
				  <el-option value="1" label="用户管理"></el-option>
				  <el-option value="2" label="角色管理"></el-option>
				  <el-option value="3" label="菜单管理"></el-option>
				  <el-option value="4" label="素材管理"></el-option>
				  <el-option value="5" label="商品分类"></el-option>
				  <el-option value="6" label="商品规格"></el-option>
				  <el-option value="7" label="商品管理"></el-option>
				</el-select> -->
			  </el-form-item>
			</el-form>
			<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">Cancel</el-button>
				<el-button type="primary" @click="submitForm">
				提交
				</el-button>
			</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="pagesListAdapt">
import { reactive,onMounted,ref } from 'vue';
import { ElMessage } from 'element-plus';
import { rolePageList,addOrUpdate,delRoleById } from '@/api/system/role';
import{menuPageList} from '@/api/system/menu'

const dialogVisible = ref(false)
const roleData = ref([])
const roleForm=reactive({
	id:null,
	name:null,
	menu:[]
})
const total=ref(0)
const currPageCount=ref(0)
const queryParams = reactive({
	pageSize:10,
	pageNum:1,
	roleName:null
})
const menuData= ref([])
const props=ref({
          label: 'name',
          children: 'children'
        }) 
const treeNode=ref([])
//选择节点
function handleCheckChange(data:any, checked:any, indeterminate:any){
	console.log(data,checked,indeterminate)
}

function delRole(id:any){
	delRoleById(id).then((resp:any)=>{
		if(resp.data.code==200){
			ElMessage({
				message: '提交成功',
				type: 'success',
			})	
			handleClose()
			getRoleList()
		}
	})
}
function menulistData(){
	menuPageList(queryParams).then((resp:any)=>{
		menuData.value = resp.data
	})
}
//提交
function submitForm(){
	roleForm.menuList=treeNode.value?.getCheckedKeys()
	addOrUpdate(roleForm).then((resp:any)=>{
		if(resp.code==200){
			ElMessage({
				message: '提交成功',
				type: 'success',
			})	
			handleClose()
			Object.assign(roleForm, {id:null,name:null});
			getRoleList()
		}
	})
}
//打开弹出框
function handleOpen(val:any){
	dialogVisible.value = true
	Object.assign(roleForm, {id:null,name:null});
	if(val){
		Object.assign(roleForm, val);
	}
}
//关闭弹出框
function handleClose(){
	dialogVisible.value = false
}
//点击分页
function handleCurrentChange(val: any) {
      console.log(`当前页: ${val}`);
	  queryParams.pageNum = val
	  //查询方法
	  getRoleList()
}
//分页查询角色信息
function getRoleList(){
	rolePageList(queryParams).then(((resp:any)=>{
		console.log(resp)
		roleData.value = resp.data.records
		console.log(roleData)
		total.value = resp.data.total
		currPageCount.value = resp.data.current
	}))
};

onMounted(() => {
	getRoleList();
	menulistData()
});
</script>
<style scoped lang="scss">
.page-container {
    height: 100%;
	background-color: #fff;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    .pageContent {
        height: calc(100% - 140px);
        flex: 1;
    }
}
</style>